<%@ page contentType="text/html;charset=UTF-8" language="java" autoFlush="true" buffer="100kb" %>
<!DOCTYPE html>
<html lang="ch">
<head>
    <%@include file="/front-end/views/common/head.jsp"%>
    <title>影片管理</title>
    <Script type="text/javascript">
        $(function () {
            $("a.glyphicon-trash").click(function () {
                // 在事件的function函数中，有一个this对象。这个this对象，是当前正在响应事件的dom对象。
                /**
                 * confirm是确认提示框函数,参数是它的提示内容
                 * 它有两个按钮，一个确认，一个是取消。返回true表示点击了，确认，返回false表示点击取消。
                 */
                return confirm("你确定要删除【" + $(this).parent().parent().find("td:first").text() + "】?");
                // return false// 阻止元素的默认行为===不提交请求
            });
        });
        function ajaxRequest(id) {
// 				1、创建XMLHttpRequest
            var xmlhttprequest = new XMLHttpRequest();
            var url = "manage/playServlet?action=getPlay&id="+id;
// 				2、调用open方法设置请求参数
            xmlhttprequest.open("GET",url,true);
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xmlhttprequest.onreadystatechange = function(){
                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                    // alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
                    var data = JSON.parse(xmlhttprequest.responseText);
                    // alert(data.play_type_id);
                    var play_id = document.getElementById('play_id');
                    play_id.value = data.play_id;
                    var name = document.getElementById('play_name');
                    name.value = data.play_name;
                    var ticket_price = document.getElementById('play_ticket_price');
                    ticket_price.value = data.play_ticket_price;
                    var length = document.getElementById('play_length');
                    length.value = data.play_length;
                    var lang_id = document.getElementById('play_lang_id');
                    lang_id.value = data.play_lang_id;
                    var type_id = document.getElementById('play_type_id');
                    type_id.value = data.play_type_id;
                    var introduction = document.getElementById('play_introduction');
                    introduction.innerText = data.play_introduction;
                }
            }
            // 3、调用send方法发送请求
            xmlhttprequest.send();
        }
    </Script>

</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <%@include file="/front-end/views/common/manage_menu.jsp"%>
    </div><!-- /.container-fluid -->
</nav>

<div class="itemone" style="display:block;">
    <div>
        <form action="manage/playServlet?action=pageByName" method="GET">
            <input type="hidden" name="action" value="pageByName">
            &nbsp&nbsp&nbsp&nbsp影片名称：<input type="name" name="play_name" value="${param.play_name}">
            &nbsp&nbsp&nbsp&nbsp<input type="submit" value="查询">
        </form>
    </div>

</div>

<div>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel1">
                        添加影片
                    </h4>
                </div>
                <div class="modal-body">
                    <form method="post"  action="manage/playServlet?action=add&pageNo=${requestScope.page.pageTotal}" enctype="multipart/form-data">
                        <input name="action" value="add" type="hidden">
                        <div class="form-group">
                            <label>影片名称：</label>
                            <input type="text" name="play_name" class="form-control" placeholder="影片名称">
                        </div>
                        <div class="form-group">
                            <label>时长：</label>
                            <input type="text" name="play_length" class="form-control" placeholder="影片时长">
                        </div>
                        <div class="form-group">
                            <label>语言：${requestScope.playLangs[1]}</label>
                            <select name="play_lang_id">
                                <c:forEach items="${requestScope.playLangs}" var="lang" >
                                    <option value="${ lang.play_lang_id }">${ lang.play_lang_name }</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>票价：</label>
                            <input type="text" name="play_ticket_price" class="form-control" placeholder="票价">
                        </div>
                        <div class="form-group">
                            <label>类型：</label>
                            <select name="play_type_id" >
                                <c:forEach items="${requestScope.playTypes}" var="type" >
                                    <option value="${ type.play_type_id }">${ type.play_type_name }</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">影片介绍：</label>
                            <input type="textarea" name="play_introduction">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">影片封面：</label>
                            <input type="file" name="play_image" id="exampleInputFile">
                            <p class="help-block">${msg}</p>
                        </div>
                        <input type="submit" value="提交" class="btn btn-primary"/>
                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>


<div>
    <div class="modal fade" id="myModaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel2">
                        修改影片
                    </h4>
                </div>
                <div class="modal-body">
                    <form method="post" id="edit" action="manage/playServlet?action=update&pageNo=${requestScope.page.pageNo}&id=${data.play_id}" enctype="multipart/form-data">
                        <input name="action" value="update" type="hidden">
                        <input name="play_id" id="play_id" type="hidden">
                        <div class="form-group">
                            <label>影片名称：</label>
                            <input type="text" name="play_name" id="play_name" value="" class="form-control" placeholder="影片名称">
                        </div>
                        <div class="form-group">
                            <label>时长：</label>
                            <input type="text" name="play_length" id="play_length" value="" class="form-control" placeholder="影片时长">
                        </div>
                        <div class="form-group">
                            <label>语言：</label>
                            <select name="play_lang_id" id="play_lang_id">
                                <c:forEach items="${requestScope.playLangs}" var="lang" >
                                    <option value="${ lang.play_lang_id }">${ lang.play_lang_name }</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>票价：</label>
                            <input value="" type="text" name="play_ticket_price" id="play_ticket_price" class="form-control" placeholder="票价">
                        </div>
                        <div class="form-group">
                            <label>类型：</label>
                            <select name="play_type_id" id="play_type_id">
                                <c:forEach items="${requestScope.playTypes}" var="type" >
                                    <option value="${ type.play_type_id }">${ type.play_type_name }</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">影片介绍：</label>
                            <textarea style="height:200px;word-break:break-all;width:500px;"value="" id="play_introduction" name="play_introduction">
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">影片封面：</label>
                            <input type="file" name="play_image">
                            <p class="help-block">${msg}</p>
                        </div>
                        <input type="submit" id="submit" value="提交" class="btn btn-primary"/>
                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

<table class="table table-hover" id="tab">
    <thead>
    <tr style="height: 12px;">
        <th>影片id</th>
        <th>影片名称</th>
        <th>时长</th>
        <th>语言</th>
        <th>售出量</th>
        <th>状态</th>
        <th>票价</th>
        <th>类型</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${requestScope.page.items}" var="play" >
        <tr>
            <td>${play.play_id}</td>
            <td>${play.play_name}</td>
            <td>${play.play_length}</td>
            <td>${requestScope.playLangs[play.play_lang_id-1].play_lang_name}</td>
            <td>${play.play_sales}</td>
            <td>${play.play_status}</td>
            <td>${play.play_ticket_price}</td>
            <td>${requestScope.playTypes[play.play_type_id-1].play_type_name}</td>
            <td>
                <a data-toggle="modal" onclick="ajaxRequest('${play.play_id}')" data-target="#myModaledit"
                    class="glyphicon glyphicon-edit"  aria-hidden="true">
                </a>
                <a class="glyphicon glyphicon-option-vertical" aria-hidden="true"></a>

                <a id="delete" href="manage/playServlet?action=delete&id=${play.play_id}&pageNo=${requestScope.page.pageNo}" class="glyphicon glyphicon-trash" aria-hidden="true"></a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<%--静态包含分页条--%>
    <%@include file="/front-end/views/common/page_nav.jsp"%>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    $('#myModal').on('shown.bs.modal', function () {
        $('#myInput').focus()
    })
</script>
<%--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>--%>
<%--<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>--%>

</body>
</html>
